<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { goodsList } from '@/request/api'
import { GoodsData } from '@/type/goods'

const goodsListData = reactive<GoodsData>(new GoodsData())
console.log(goodsListData)
onMounted(() => {
    goodsList({...goodsListData.otherData}).then((res) => {
        console.log(res)
        goodsListData.list = res.data.list
        goodsListData.otherData.count = res.data.list.length
    }).catch((err) => {
        console.log(err)
    })
})

const onSubmit = () => {
    goodsList({...goodsListData.otherData}).then((res) => {
        console.log(res)
        goodsListData.list = res.data.list
        goodsListData.otherData.count = res.data.list.length
    }).catch((err) => {
        console.log(err)
    })
}
</script>

<template>
    <div>
        <div class="search_box">
            <el-form :inline="true" :model="goodsListData.otherData" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input v-model="goodsListData.otherData.title" placeholder="请输入商品名称" clearable />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="goodsListData.otherData.description" placeholder="请输入商品描述" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-container">
            <el-table :data="goodsListData.list" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="title" label="名称" />
                <el-table-column prop="description" label="描述" width="500" />
                <el-table-column prop="price" label="价格" />
            </el-table>
            <el-pagination class="pagination-container" size="default" background layout="prev, pager, next"
                :total="goodsListData.otherData.count" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.el-tabs__header {
    background-color: #f5f7fa;
}

.pagination-container {
    margin-top: 20px;
}
</style>